{% extends 'base.html' %}
{% load static %}

{% block title %}排行榜{% endblock %}

{% block style %}
    <!-- Bootstrap Core CSS -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="{% static 'css/helper.css' %}" rel="stylesheet">
    <link href="{% static 'css/style.css' %}" rel="stylesheet">
    <link href="{% static 'css/semantic.ui.min.css' %}" rel="stylesheet">
    <style rel="stylesheet">
        .ui.compact.table td {
            font-size: 1em;
            padding-top: 0.1em;
            padding-bottom: 0.1em;
            color: #000;
        }
    </style>
{% endblock %}

{% block body %}
    <body class="fix-header fix-sidebar">
    <!-- Preloader - style you can find in spinners.css -->
    <div class="preloader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
        </svg>
    </div>
    <!-- Main wrapper  -->
    <div id="main-wrapper">

        <div class="unix-login">
            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
<h1><font face="verdana" color="#3CF070">距离比赛结束还有:</font></h1>
<style>  
*{ margin:0; padding:0; list-style:none;}  
body{ font-size:18px; text-align:center;}  
.time{ font-size:50px;color:red;height:30px; padding:0px;} 
table tbody {
        display: block;
        height: 270px;
        overflow-y: scroll;
             }            
table thead,
tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
            }
/*关键设置：滚动条默认宽度是16px 将thead的宽度减16px*/
table thead {
        width: calc( 100% - 1em)
             }
</style>
<body>  
    <div class="time">  
        <span id="t_d">比</span>  
        <span id="t_h">赛</span>  
        <span id="t_m">结</span>  
        <span id="t_s">束</span>  
    <span id="daoqi"></span>  
    </div>  
  
  
  
<script>  
   function GetRTime(){  
       var EndTime= new Date('{{Year}}/{{month}}/{{day}} {{Hour}}:{{Minute}}:{{Second}}');
       var NowTime = new Date(); 
       var t =EndTime.getTime() - NowTime.getTime(); 
       var d=Math.floor(t/1000/60/60/24);  
       var h=Math.floor(t/1000/60/60%24);  
       var m=Math.floor(t/1000/60%60);  
       var s=Math.floor(t/1000%60);  
       if(s>="0" && m>="0" && h>="0" && d>="0"){
       document.getElementById("t_d").innerHTML = d + "";  
       document.getElementById("t_h").innerHTML = h + ":";  
       document.getElementById("t_m").innerHTML = m + ":";  
       document.getElementById("t_s").innerHTML = s + "";  }
       if(s=="0" && m=="0" && h=="0" && d=="0"){ 
       document.getElementById("t_d").innerHTML =  "";  
       document.getElementById("t_h").innerHTML =  "";  
       document.getElementById("t_m").innerHTML =  "";  
       document.getElementById("t_s").innerHTML =  "";
       document.getElementById("daoqi").innerHTML ="比赛已结束";//这里设置到期时间后的提醒内容  
       document.getElementById("daoqi").style.color="red";}  
}  
   setInterval(GetRTime,0);  
</script>
                        <div class="card" style="margin-top: 10px;opacity: .80;">
                            <table class="ui red compact table">得分情况
                                <thead>
                                <tr>
                                    <th>队伍排名</th>
                                    <th>队伍名称</th>
                                    <th>队伍得分</th>
                                    <th>靶机状态</th>
                                </tr>
                                </thead>
                                <tbody id="tab1">
                                <tr>
                                    <td>蘋果</td>
                                    <td>200</td>
                                    <td>0 克</td>
                                </tr>
                                <tr>
                                    <td>Orange</td>
                                    <td>310</td>
                                    <td>0 克</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="card" style="margin-top: 10px;opacity: .80;">
                            <table class="ui teal compact table">状态日志
                                <thead>
                                <tr>
                                    <th>攻击队伍</th>
                                    <th>被攻击队伍</th>
                                    <th>攻击时间</th>
                                    <th>攻击得分</th>
                                </tr>
                                </thead>
                                <tbody id="tab2">
                                <tr>
                                    <td>蘋果</td>
                                    <td>200</td>
                                    <td>0 克</td>
                                    <td>0 克</td>
                                </tr>
                                <tr>
                                    <td>Orange</td>
                                    <td>310</td>
                                    <td>0 克</td>
                                    <td>0 克</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- End Wrapper -->
    <!-- All Jquery -->
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="{% static 'js/popper.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="{% static 'js/jquery.slimscroll.js' %}"></script>
    <!--stickey kit -->
    <script src="{% static 'js/sticky-kit.min.js' %}"></script>
    <!--Custom JavaScript -->
    <script src="{% static 'js/custom.min.js' %}"></script>
    <script src="{% static 'js/semantic.ui.min.js' %}"></script>
    </body>
    <script>
        function reload(url, tableid) {
            h1 = $.ajax({url: url, async: false}).responseText;
            $('#'+tableid).html(h1);
            console.log(h1);
        }


        $(document).ready(function () {
            reload('/api1/','tab1');
            reload('/api2/','tab2');
            setInterval("reload('/api1/','tab1')", 5000);
            setInterval("reload('/api2/','tab2')", 5000);
            //setTimeout(function(){AutoReload();}, 1000);
        });
    </script>
{% endblock %}

